<template>
  <div class="login">
    <el-container>
      <el-main>
        <div>
          <back-to-home-logo></back-to-home-logo>
        </div>
        <div class="card">
          <div class="headFont">
            问卷星球登陆
          </div>
          <el-form :model="form" :rules="rules" status-icon ref="form">
            <el-form-item prop="email">
              <el-input class="inputBox" v-model="form.email"
                        placeholder="请输入邮箱" prefix-icon="el-icon-user-solid"
                        size="large"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="请输入密码"
                        show-password prefix-icon="el-icon-s-goods" size="large"></el-input>
            </el-form-item>
            <el-form-item class="forgetPassword">
              <el-button type="text" class="signIn" @click="retrieveClick">忘记密码？</el-button>
            </el-form-item>
            <el-button class="signIn" type="primary" round @click="login('form')">登录</el-button>
            <el-button class="login" type="text" @click="registerClick">立即注册</el-button>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import BackToHomeLogo from "../../../components/BackToHomeLogo";
import axios from "axios";
import qs from "qs";

export default {
  name: "Login",
  components: {
    BackToHomeLogo,
  },
  setup() {
    return {
      access(){
        this.$message.success({
          showClose: true,
          message: '登录成功！',
          type: 'success',
          duration: 1500,
          onClose: () => {
            window.open('/', '_self')
          }
        })
      },
      refuse(){
        this.$message.error({
          showClose: true,
          message: '登录失败！',
          type: 'error',
          duration: 1500
        })
      }
    }
  },
  data() {
    const emailCheck = (rule, value, callback) => {
      if (value === ''){
        callback(new Error('请输入邮箱'))
      } else {
        const reg = /^([a-z0-9]+[_|\_|\.]?)*[a-z0-9]+@([a-z0-9]+[_|\_|\.]?)*[a-z0-9]+\.[a-z]{2,3}$/
        if (!reg.test(value)) {
          callback(new Error('请输入正确的邮箱格式'))
        } else {
          callback()
        }
      }
    }
    return {
      labelPosition: 'right',
      form: {
        email: '',
        password: ''
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {validator: emailCheck, trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    registerClick() {
      this.$router.push('/login/register')
    },
    retrieveClick() {
      this.$router.push('/login/retrieve')
    },
    login(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = {
            email: this.form.email,
            password: this.form.password
          }
          axios.post('/api/login', qs.stringify(data)).then((res) => {
            if (res.data.code === 0) {
              localStorage.setItem('id', res.data.data.id)
              this.access()
            } else {
              this.refuse()
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

.el-main {
  background-color: #409EFF;
  color: #333;
  text-align: center;
  line-height: 160px;
  position: fixed;
  width: 100%;
  height: 100%;



  background-image: url('../img/LoginBackgroundImg.jpg');
  background-repeat: no-repeat;
  background-size: cover;

}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 600px;
}

.login img{
  width: 50px;
  float: left;

}

.card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /*position: relative;*/
  box-sizing: border-box;
  width: 500px;
  height: 600px;
  padding: 20px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

 .el-input__inner{   /*或者 .s2>>>.el-input__inner  */
  /*background:rgba(0,0,0,0.2);    !*调整inner的背景色，透明*!*/
  border-radius: 50px;    /*输入框圆角值*/
}

.headFont {
  font-size: 32px;
  color: white;
}

.el-button--primary {
  font-size: 22px;
  width: 450px;
}

.el-button--text {
  color: lightsalmon;
}
.el-button--text:hover{
  color: khaki;
}
.el-button--text:focus{
  color: lightsalmon;
}
.el-button--text:active {
  color: coral;
}
.forgetPassword {
  position: absolute;
  right: 0;
}

.login {
  font-size: 16px;
  position: relative;
  margin-bottom: 50px;
  color: #dc823b;
}

.signIn {
  background-color: transparent;
  color: #dc823b;
}
</style>